<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- 导入依赖 -->
    <script src="../js/vue@2.6.20.min.js" type="text/javascript"></script>
    <script src="../js/element-ui@2.12.0.min.js" type="text/javascript"></script>
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <link href="../css/element-ui@2.12.0.min.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="app" class="class_a">
        {{message}}
        <span>{{fullname}}</span>
        <input v-model="firstname">
        <input v-model="lastname">
        <span>{{fullname}}</span>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello world",
            firstname: "jin",
            lastname: "pan",
            fullname: 'jin pan'

        },
        /* 计算属性 */
        /*   computed:{
              fullname:function(){
                  return this.firstname+this.lastname
              }
          }, */
        watch: {
            firstname: function (val) {
                this.fullname = val + this.lastname;
            },
            lastname: function (val) {
                this.fullname = this.firstname + val;
            }
        }
    })
</script>

</html>